<template>
  <div>
    <div class="div-artile" v-for="item in list" :key="item.id">
      <router-link target="_blank" :to="{ path: '/club/details', query: {id:item.id} }">
        <el-card shadow="hover">
          <template #header>
            <div class="div-header">
              <h3>{{item.articleTitle}}</h3>
              <span>发表于: {{item.createTime}}</span>
            </div>
          </template>
          <div>
            <el-row>
              <!-- 图片 -->
              <el-col :span="8">
                <el-image class="image" :src="item.defImg"></el-image>
              </el-col>
              <!-- 内容 -->
              <el-col :span="16" class="col16">
                <p class="p-content" v-html="item.contentHtml"></p>
                <!-- 标签 -->
                <div class="div-col-left-footer">
                  <el-tag v-if="item.tag !== ''">{{item.tag}}</el-tag>
                </div>
                <div class="div-commect">
                  <span>{{item.commentCount}} <span style="font-size: 10px">回复</span></span>
                  <span style="margin-left: 5px">{{item.viewCount}} <span style="font-size: 10px">浏览</span></span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: "MyClubArticleList",
  props: ["list"],
  data() {
    return {};
  },
  computed: {


  },
  methods: {

  }
};
</script>
<style>

.div-header h3 {
  display: inline-block;
}

.div-header span {
  float: right;
  margin-right: 10px;
}

.div-artile {
  margin-top: 20px;
  margin-bottom: 10px;
}

.p-content {
  text-indent: 20px;
  letter-spacing: 2px;
  display: -webkit-box;  /*  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */
  -webkit-box-orient: vertical; /*  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式  */
  -webkit-line-clamp: 5; /*  -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */
  overflow: hidden;
}

.p-content img {
  display: none;
}

.col16 {
  padding-left: 15px;
}

.div-col-left-footer {
  margin-top: 2.5rem;
}

.div-commect {
  margin-top: 10px;
  /*margin-bottom: 10px;*/
}

.image {
  border-radius: 5px;
  width: 100%;
  height: 200px;
}
</style>